<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../vue.js"></script>
    <title>表单</title>
  </head>
  <body>
    <div id="app">
      <!-- action属性不再常用，只是作为一个结构呈现，现在往往用的多的是ajax，局部更新页面 -->
      <!-- 表单的提交，会有刷新的默认事件，我们要使用事件修饰符 -->
      <form @submit.prevent="demo">
        账号：<input type="text" v-model="userInfo.account" /> <br />
        密码：<input type="password" v-model="userInfo.password" /> <br />
        <!-- v-model默认收集的是value值但是没有配置的时候，即使选中了 也是null -->
        性别: 男<input
          type="radio"
          name="sex"
          v-model="userInfo.sex"
          value="male"
        />
        <br />
        女<input
          type="radio"
          name="sex"
          v-model="userInfo.sex"
          value="female"
        />
        <br />
        <!-- 多选 多选也要配置value值，如果不配置value值，就会是某个多选的checked属性值-->
        爱好：<br />
        学习 <input type="checkbox" v-model="userInfo.hobby" value="study" />
        <br />
        <!--  -->
        吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat" />
        <br />
        <!--  -->
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
        <br />

        所在地区：
        <select v-model="userInfo.city">
          <option value="">请选择地区</option>
          <option value="m78">m78星云</option>
          <option value="shenzhen">深圳</option>
          <option value="qqcy">青青草原</option>
        </select>
        <br />
        <!-- 其他信息  .lazy修饰符 失去焦点的一瞬间再收集表单的数据-->
        <textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea>
        <br />
        <input type="checkbox" v-model="userInfo.agree" />接收用户协议
        <button>提交</button>
      </form>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          userInfo: {
            account: "",
            agree: "",
            password: "",
            sex: "",
            hobby: [],
            city: "m78",
            other: "",
          },
        },
        methods: {
          demo() {
            // console.log(this.account, this.agree);
            //一个个的输出太麻烦了，
            // console.log(this._data);
            console.log(this.userInfo);
          },
        },
      });
      // console.log(app);
    </script>
  </body>
</html>
